<template>
  <view class="game-placard" @longpress="bingLongTap" v-show="loadFinish">
    <navBar :navbarData.sync="navbarData"></navBar>
    <view :class="isIphoneX ? 'tips1624':'tips1334'" style="width: 34rpx;height: 56rpx;position: absolute;z-index: 999;"
      v-if="tishi">
      <image style="width:100%;height: 158rpx;" mode="widthFix"
        src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/shang.png">
    </view>
    <!-- 大图 -->
    <view class="qm-banner-underImg uperUderImg">
      <view class="aaaa" v-for="(item,index) in swipperList" :key="index"
        :style="{ opacity: index == currentCard ? '1' : '0' }">
        <image lazy-load :src="item.imgBig" style="width: 100%;height: 100%;" @error="imgLoadFinish"
          @load="imgLoadFinish"></image>
      </view>
    </view>
    <view class="game-placard-con">
      <!-- 标题 -->
      <view style="width: 525rpx;height: 44rpx;" :class="isIphoneX ? 'isIphoneX1624':'isIphoneX1334'">
        <image style="width:100%;height: 44rpx;" mode="widthFix"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/gongxi1.png">
      </view>
      <view style="width: 360rpx;height: 30rpx;margin-top: 30rpx;">
        <image style="width:100%;height: 30rpx;" mode="widthFix"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/yitongjianzheng1.png">
      </view>
      <!-- swipper -->
      <view class="uni-margin-wrap">
        <swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay"
          :interval="interval" :duration="duration" :current="currentCard" @change="changeCardSwipper">
          <swiper-item class="swiper-item" v-for="(item,index) in swipperList" :key="index">
            <image style="width: 100%;" :src="item.img" mode="widthFix" @error="imgLoadFinish" @load="imgLoadFinish">
          </swiper-item>
        </swiper>
        <!-- 指示器 -->
        <view style="display: flex;background-color: rgba(255, 255, 255, .4);margin-top: 20rpx;">
          <view style="width: 78rpx;height: 5rpx;" v-for="(item,index) in swipperList" :key="index"
            :class="index == currentCard ? 'actice':''"></view>
        </view>
        <!-- 左右箭头 -->
        <view style="width: 43rpx;height: 72rpx;position: absolute;top: 41%;left: 7%;" @click="prevSwiper"
          v-if="showLeft">
          <image style="width:100%;height: 72rpx;" mode="widthFix"
            src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/left-1.png">
        </view>
        <view style="width: 43rpx;height: 72rpx;position: absolute;top: 41%;right: 7%;" @click="nextSwiper"
          v-if="showRight">
          <image style="width:100%;height: 72rpx;" mode="widthFix"
            src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/right-1.png">
        </view>
        <!-- 蒙版 -->
        <view :class="isIphoneX ? 'game-tips1624':'game-tips1334'" @click="handelBank" v-if="tishi">
          <image style="width:100%;height: 158rpx;" mode="widthFix"
            src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/chenggong.png"
            v-if="currentCard == 0">
            <image style="width:100%;height: 158rpx;" mode="widthFix"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/bizhibaocun2.png"
              v-if="currentCard == 1">
              <image style="width:100%;height: 158rpx;" mode="widthFix"
                src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/bizhibaocun3.png"
                v-if="currentCard == 2">
                <image style="width:100%;height: 158rpx;" mode="widthFix"
                  src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/bizhibaocun4.png"
                  v-if="currentCard == 3">
        </view>
      </view>
      <!-- 底部文字 -->
      <view style="width: 265rpx;height: 35rpx;margin-top: 65rpx;">
        <image style="width:100%;height: 35rpx;" mode="widthFix"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/cahngan1111.png">
      </view>
    </view>
  </view>
</template>
<script>
  import NavBar from '@/components/common/navbar';
  import tip from '@/utils/tip';
  export default {
    components: {
      navBar: NavBar,
    },
    data() {
      return {
        // 组件所需的参数
        navbarData: {
          showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
          title: 'game详情页', //导航栏 中间的标题
          newLogo: uni.getStorageInfoSync('storeLogo'),
          isTopFixed: true,
          showSearchAndBack: 1,
          whiteIcon: 1,
          hideSearch: 1,
        },
        indicatorDots: false,
        autoplay: false,
        interval: 4000,
        duration: 500,
        circular: true,
        currentCard: 0,
        swipperList: [{
            img: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper-xiao1-1.png',
            imgBig: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper11.png',
          },
          {
            img: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper-xiao2-1.png',
            imgBig: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper22.png',
          },
          {
            img: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper-xiao3-1.png',
            imgBig: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper33.png',
          },
          {
            img: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper-xiao4-1.png',
            imgBig: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper44.png',
          }
        ],
        scaleFactor: 0,
        windowHeight: 0,
        windowWidth: 0,
        isIphoneX: false,
        imgLoadNum: 0,
        loadFinish: false,
        tishi: false,
        showLeft: false,
        showRight: true,
        from: false
      };
    },
    onLoad: async function(option) {
      if (option.id) {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'game',
          "c_event_category_2": 'Interaction',
          "c_pagename": '游戏壁纸下载页'
        }
        wx.reportEvent("c_ebmp_draco_update_game_finish_game", {
          "eventdata": JSON.stringify(Params)
        })
        getApp().commonClTrack('c_ebmp_draco_update_game_finish_game', Params)
      }
      let params = {
        path: '/pages/litha-launch/game/gamePlacard',
        pageName: 'game壁纸页',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      }
      getApp().cl_tracker.track('mini_program_view', params)
      wx.reportEvent("mini_program_view", {
        "eventdata": JSON.stringify(params),
        "pagename": params.pageName
      })

      uni.showLoading({
        title: '加载中'
      });
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
      var that = this;
      let systemInfomations = wx.getSystemInfoSync()
      // 机型适配比例系数
      that.scaleFactor = 750 / systemInfomations.windowWidth
      // 当前机型-window高度
      that.windowHeight = systemInfomations.windowHeight * that.scaleFactor //rpx
      // 当前机型-window宽度
      that.windowWidth = systemInfomations.windowWidth * that.scaleFactor //rpx

      let ratio = that.windowWidth / that.windowHeight
      if (ratio < 750 / 1334) {
        that.isIphoneX = true;
      }
    },

    methods: {
      imgLoadFinish(e) {
        this.imgLoadNum++;
        if (this.imgLoadNum == this.swipperList.length) {
          this.loadFinish = true;
          uni.hideLoading();
        }
      },
      handelBank() {
        this.tishi = false
      },
      changeCardSwipper(e) {
        this.currentCard = e.detail.current
        this.showArrow()
      },

      showArrow() {
        if (this.currentCard == 0) {
          this.showLeft = false
          this.showRight = true
        } else if (this.currentCard == 3) {
          this.showRight = false
          this.showLeft = true
        } else {
          this.showLeft = true
          this.showRight = true
        }
      },

      bingLongTap() {
        var that = this
        wx.getSetting({
          success: function(res) {
            // console.log(res)
            //判断是否已经授权
            if (res.authSetting["scope.writePhotosAlbum"]) {
              //已经授权，进行下载图片、视频，后进行保存
              that.downloadFile()
            } else if (!res.authSetting.hasOwnProperty("scope.writePhotosAlbum")) {
              //用户第一次使用，调起授权
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                  //授权成功，进行下载图片、视频，后进行保存
                  that.downloadFile()
                },
                fail() {
                  //已经拒绝授权，去到设置页面授权
                  wx.showModal({
                    title: "未授权添加到相册",
                    content: "下载素材保存到相册，需打开添加到相册的权限开关",
                    confirmColor: "#00D2EC",
                    confirmText: "去设置",
                    success(res) {
                      if (res.confirm) {
                        wx.openSetting({})
                      }
                    }
                  })
                }
              })
            } else {
              //已经拒绝授权，去到设置页面授权
              wx.showModal({
                title: "未授权添加到相册",
                content: "下载素材保存到相册，需打开添加到相册的权限开关",
                confirmColor: "#00D2EC",
                confirmText: "去设置",
                success(res) {
                  if (res.confirm) {
                    wx.openSetting({})
                  }
                }
              })
            }
          },
        })
      },

      //上一页
      prevSwiper() {
        let current = this.currentCard;
        let ncurrent = current > 0 ? current - 1 : current;
        this.currentCard = ncurrent
        this.showArrow()
        // console.log(this.currentCard, '上一页')
      },
      // 下一页
      nextSwiper() {
        let current = this.currentCard;
        let ncurrent = current < (this.swipperList.length - 1) ? current + 1 : current;
        this.currentCard = ncurrent
        this.showArrow()
        // console.log(this.currentCard, '下一页')
      },

      downloadFile() {
        let that = this
        let imgUrl = ''
        if (this.currentCard == 0) {
          imgUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper1.png'
        } else if (this.currentCard == 1) {
          imgUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper2.png'
        } else if (this.currentCard == 2) {
          imgUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper3.png'
        } else if (this.currentCard == 3) {
          imgUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/wallpaper44.png'
        }

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "Game",
          "operation_type": "点击",
          "button_name":"游戏壁纸下载"
        })

        wx.showLoading({
          title: '下载中...'
        });
        wx.downloadFile({
          url: imgUrl,
          success: function(res) {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                wx.hideLoading(); //隐藏 loading 提示框
                that.tishi = true
                // 两秒关闭
                setTimeout(() => {
                  that.tishi = false
                }, 2000);
              }
            })
          }
        })
      },

      onShareAppMessage: async function(res) {
        let that = this
        let imageUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Game-500_400.png'
        let path = '/pages/litha-launch/game'
        let title = '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘'
        this.$commonSensors.sensorsPageShare()
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return this.$commonFunction.commonShare(res, title, path, imageUrl)
      },
      onShareTimeline() {
				let title = '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘'
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return {
          title: title,
          query: '',
          imageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Game-500_400.png'
        };
      },
    }
  };
</script>
<style>
  .game-placard {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    z-index: 199;
    overflow: hidden;
  }


  .game-placard-con {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
  }

  .bigImg-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }


  .uni-margin-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 75rpx;
    position: relative;
  }

  .swiper {
    width: 449rpx;
    height: 790rpx;
  }

  .swiper-item {
    display: block;
    height: 790rpx;
    line-height: 300rpx;
    text-align: center;
    border-radius: 16rpx;
    overflow: hidden;
    // box-shadow: 0rpx 0rpx 12.22rpx 0.78rpx rgba(3, 3, 3, .2);
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  .actice {
    background-color: #fff;
  }


  .fade-in {
    animation: fadeIn 2s;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .qm-banner-underImg {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }

  .uperUderImg {
    width: 100%;
    height: 100vh;
  }

  .aaaa {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    transform: translate(0%, 0) translateZ(0);
    transition: .8s;
  }

  .isIphoneX1624 {
    margin-top: 315rpx;
  }

  .isIphoneX1334 {
    margin-top: 140rpx;
  }

  .game-tips1624 {
    width: 449rpx;
    height: 790rpx;
    position: absolute;
    top: 0%;
    z-index: 999;
  }

  .game-tips1334 {
    width: 449rpx;
    height: 790rpx;
    position: absolute;
    top: 0%;
    z-index: 999;
  }

  .tips1624 {
    top: 11%;
    /* right: 4%; */
    right: 17%
  }

  .tips1334 {
    top: 11%;
    right: 20%;
  }
</style>
